I enquired about including some slideshows on our web site in Sep 2012. Unfortunately ETD web sites are being redeveloped, ours is scheduled for term 2 2013, and the web team is very busy preparing for that transition. There is no provision for schools to load in Javascript or CSS to their web sites, just basic content. So it seems I had struck a dead end - some schools that had snazzier web sites had made them happen some time ago. Also, the web redevelopment is focused on accessibility, so putting in new content that is not accessible is not popular, for good reason.
Not that I let that stop me experimenting to see what options were still open to us - after all, our current web site was very bland. I looked at embedding a slideshow from another provider, since this was feasible and offered a way to incorporate the type of content I wanted without loading anything fancy on to the site itself. I don't think the results were all that great, but here are some notes:
A slideshow from Flickr works fine, but stops after one loop. I put this code into the HTML of my page successfully:
Stopping after one display is not very useful though.
Next, I tried Picasa web albums. I thought Picasa might provide a looping slideshow but in fact embedding a Picasa web album doesn't even seem to work. If you log in to your account on a browser to Picasa web albums there should be an "Embed slideshow" button, which generates a popup with some HTML code, e.g.
is to run a slideshow from your Picasa web albums page and then place it into a div with some inline CSS to crop off the boring bits. The code looks like this (the css is designed to crop out the extraneous black portions and unnecessary controls):
I had mixed success with this, an important point is to make sure the photos are public or you may get the slideshow showing only the first photo and displaying "Pause" across the photo. Also, iframes seem to be a bit on the nose, and don't work on all platforms. Obviously of course, any Flash player will not work on an iPad.
Next I tried Slideshare.net, which in late 2011 announced they had moved to support for HTML5, so it supported more platforms. This does have the disadvantage of needing to create a presentation of the photos - but this can be a good thing as it provides a great opportunity to insert captions. However, I found that you need to be pretty careful as it presents in a small player and the text can end up being very small.
The code to embed slideshare also requires an iframe though:
Hmm, so at this point I have tried many options but none really do what I want, which I thought sounded pretty simple:
Autoplay a slideshow
Picasa web does do this if you embed the slideshow as above, but plays the slides very fast)
YouTube can do this
Slideshare does not do this
Work on multiple platforms (many are still using Flash players)
slideshare.net and YouTube are probably best for this as they have HTML5 embedding
Simple to create and upload a slideshow
Flickr and Picasa are probably the easiest for this - the others require you to do some content creation from the images
Automatically do transitions (Slideshare doesn't even auto play)
I looked into Authorstream, but it embeds with a flash player so I didn't bother trying it out.
Overall I am not sure that there is really anything one can embed that will do what we want - without perhaps embedding a movie file, like YouTube - I tried YouTube embedding as well and it works quite well. It is possible to make it autoplay, but it doesn't seem to autoplay on all platforms. Although it is supposed to be possible, I wasn't able to make it loop. However, the presentation certainly looks good, although of course it is pretty bandwidth hungry. On top of that you have to create a movie file first.
In conclusion, I think the fact that we can't load a slideshow on to our website is pretty disappointing, since it is such a common feature, and certainly makes the content more appealing. In the process of checking this out I found some good examples, none of which I can replicate successfully on our site. For instance:
Here are some notes that might be useful when working with this system:
I enquired about including some slideshows on our web site in Sep 2012. Unfortunately ETD web sites are being redeveloped, ours is scheduled for term 2 2013, and the web team is very busy preparing for that transition. There is no provision for schools to load in Javascript or CSS to their web sites, just basic content. So it seems I had struck a dead end - some schools that had snazzier web sites had made them happen some time ago. Also, the web redevelopment is focused on accessibility, so putting in new content that is not accessible is not popular, for good reason.
Not that I let that stop me experimenting to see what options were still open to us - after all, our current web site was very bland. I looked at embedding a slideshow from another provider, since this was feasible and offered a way to incorporate the type of content I wanted without loading anything fancy on to the site itself. I don't think the results were all that great, but here are some notes:
A slideshow from Flickr works fine, but stops after one loop. I put this code into the HTML of my page successfully:
<object type="text/html" data="http://www.flickr.com/slideShow/index.gne?user_id=87467825@N07" height="500" width="500"> </object>
Stopping after one display is not very useful though.
Next, I tried Picasa web albums. I thought Picasa might provide a looping slideshow but in fact embedding a Picasa web album doesn't even seem to work. If you log in to your account on a browser to Picasa web albums there should be an "Embed slideshow" button, which generates a popup with some HTML code, e.g.
<embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" flashvars="host=picasaweb.google.com&hl=en_US&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F106462490773718685870%3Falt%3Drss%26kind%3Dphoto%26access%3Dpublic%26psc%3DF%26q%26uname%3D106462490773718685870" pluginspage="http://www.macromedia.com/go/getflashplayer" height="192" width="288">
But this didn't generate any images on my page, I am not sure why.
Another alternative as documented at this site:
http://www.swedishwebdesign.eu/2011/04/loop-picasa-slideshow.html
is to run a slideshow from your Picasa web albums page and then place it into a div with some inline CSS to crop off the boring bits. The code looks like this (the css is designed to crop out the extraneous black portions and unnecessary controls):
<div style="position:relative;
top:-20px;
overflow-y:hidden;overflow-x:hidden;height:440px;width:580px">
<div style="position:relative;
top:-50px;
left:-40px;
overflow-y:hidden;overflow-x:hidden;height:100%;width:100%">
<iframe name="g26" style="border:0px double " width=650 height=510 src="https://picasaweb.google.com/108048850740176980730/Sample#slideshow"></iframe>
</div>
</div>
I had mixed success with this, an important point is to make sure the photos are public or you may get the slideshow showing only the first photo and displaying "Pause" across the photo. Also, iframes seem to be a bit on the nose, and don't work on all platforms. Obviously of course, any Flash player will not work on an iPad.
Next I tried Slideshare.net, which in late 2011 announced they had moved to support for HTML5, so it supported more platforms. This does have the disadvantage of needing to create a presentation of the photos - but this can be a good thing as it provides a great opportunity to insert captions. However, I found that you need to be pretty careful as it presents in a small player and the text can end up being very small.
The code to embed slideshare also requires an iframe though:
<iframe src="http://www.slideshare.net/slideshow/embed_code/14408131?hostedIn=slideshare&page=upload" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
Hmm, so at this point I have tried many options but none really do what I want, which I thought sounded pretty simple:
I looked into Authorstream, but it embeds with a flash player so I didn't bother trying it out.
Overall I am not sure that there is really anything one can embed that will do what we want - without perhaps embedding a movie file, like YouTube - I tried YouTube embedding as well and it works quite well. It is possible to make it autoplay, but it doesn't seem to autoplay on all platforms. Although it is supposed to be possible, I wasn't able to make it loop. However, the presentation certainly looks good, although of course it is pretty bandwidth hungry. On top of that you have to create a movie file first.
In conclusion, I think the fact that we can't load a slideshow on to our website is pretty disappointing, since it is such a common feature, and certainly makes the content more appealing. In the process of checking this out I found some good examples, none of which I can replicate successfully on our site. For instance: